
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>为互联网提供优质内容，让世界听见价值之声 - 新闻资讯网</title>
    <style>
        /* ========================= 全局 ========================= */ *{ margin:0; padding:0; box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background:#f3f4f6; color:#1f2937; min-height:100dvh; } a{ text-decoration:none; color:inherit; } img{ max-width:100%; display:block; } /* ========================= 顶部导航 ========================= */ .navbar{ width:100%; background:#ffffff; border-bottom:1px solid #e5e7eb; position:sticky; top:0; z-index:1000; } .nav-container{ max-width:1200px; margin:auto; display:flex; align-items:center; justify-content:space-between; padding:14px 18px; } .logo{ font-size:24px; font-weight:700; color:#111827; } .nav-menu{ display:flex; gap:24px; } .nav-menu a{ font-size:15px; color:#4b5563; transition:.3s; } .nav-menu a:hover{ color:#2563eb; } /* ========================= Banner ========================= */ .hero{ padding:60px 20px 40px; } .hero-container{ max-width:1200px; margin:auto; } .hero-card{ background: linear-gradient( 135deg, #2563eb, #1e40af ); border-radius:24px; padding:60px 50px; color:#fff; box-shadow: 0 10px 30px rgba(37,99,235,.25); } .hero-card h1{ font-size:48px; line-height:1.3; margin-bottom:18px; } .hero-card p{ font-size:18px; line-height:1.9; opacity:.95; max-width:700px; } .hero-btn{ display:inline-block; margin-top:28px; padding:14px 30px; background:#fff; color:#2563eb; border-radius:14px; font-weight:600; transition:.3s; } .hero-btn:hover{ transform:translateY(-3px); } /* ========================= 主体 ========================= */ .container{ max-width:1200px; margin:auto; padding:20px; } /* ========================= 分类栏目 ========================= */ .category-bar{ display:flex; gap:14px; overflow:auto; padding-bottom:10px; margin-bottom:25px; } .category-item{ background:#fff; border:1px solid #e5e7eb; padding:10px 18px; border-radius:999px; white-space:nowrap; font-size:14px; transition:.3s; } .category-item:hover{ background:#2563eb; color:#fff; border-color:#2563eb; } /* ========================= 新闻布局 ========================= */ .news-layout{ display:grid; grid-template-columns: 2fr 1fr; gap:24px; } /* ========================= 新闻列表 ========================= */ .news-list{ display:flex; flex-direction:column; gap:20px; } .news-card{ background:#fff; border-radius:18px; overflow:hidden; transition:.3s; box-shadow: 0 2px 10px rgba(0,0,0,.04); } .news-card:hover{ transform:translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,.08); } .news-image{ width:100%; height:240px; background: linear-gradient( 135deg, #dbeafe, #bfdbfe ); } .news-content{ padding:24px; } .news-tag{ display:inline-block; padding:6px 12px; background:#eff6ff; color:#2563eb; border-radius:999px; font-size:13px; margin-bottom:14px; } .news-title{ font-size:28px; line-height:1.5; margin-bottom:14px; color:#111827; } .news-desc{ color:#6b7280; line-height:1.9; font-size:15px; } .news-meta{ margin-top:18px; display:flex; gap:16px; color:#9ca3af; font-size:13px; } /* ========================= 侧边栏 ========================= */ .sidebar{ display:flex; flex-direction:column; gap:20px; } .side-card{ background:#fff; border-radius:18px; padding:22px; box-shadow: 0 2px 10px rgba(0,0,0,.04); } .side-title{ font-size:20px; margin-bottom:18px; color:#111827; } .hot-list{ display:flex; flex-direction:column; gap:16px; } .hot-item{ display:flex; gap:14px; } .hot-num{ width:28px; height:28px; background:#2563eb; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:bold; flex-shrink:0; } .hot-text{ font-size:14px; line-height:1.7; color:#374151; } /* ========================= Footer ========================= */ footer{ margin-top:60px; background:#111827; color:#d1d5db; text-align:center; padding:30px 15px; } footer p{ line-height:1.8; font-size:14px; } /* ========================= 平板 ========================= */ @media screen and (max-width:992px){ .news-layout{ grid-template-columns:1fr; } .sidebar{ flex-direction:row; overflow:auto; } .side-card{ min-width:320px; } } /* ========================= 手机端 ========================= */ @media screen and (max-width:768px){ .nav-container{ flex-direction:column; gap:14px; } .nav-menu{ gap:14px; overflow:auto; width:100%; justify-content:flex-start; } .hero{ padding:20px 15px; } .hero-card{ padding:30px 22px; border-radius:18px; } .hero-card h1{ font-size:30px; line-height:1.5; } .hero-card p{ font-size:15px; line-height:1.9; } .hero-btn{ width:100%; text-align:center; } .container{ padding:15px; } .news-image{ height:180px; } .news-content{ padding:18px; } .news-title{ font-size:22px; } .news-desc{ font-size:14px; } .news-meta{ flex-wrap:wrap; gap:10px; } .sidebar{ flex-direction:column; } .side-card{ min-width:auto; } footer{ margin-top:40px; padding:24px 12px; } }
    </style>
    <!--cdn-->
</head>
<body>
    <!-- 顶部导航 -->
    <header class="navbar">
        <div class="nav-container">
            <div class="logo">
                新闻资讯网            </div>
            <nav class="nav-menu">
			<a href="#">首页</a> <a href="#">热点</a> <a href="#">科技</a> <a href="#">娱乐</a> <a href="#">体育</a>
            </nav>
        </div>
    </header>
    <!-- Banner -->
    <section class="hero">
        <div class="hero-container">
            <div class="hero-card">
                <h1>
                    为互联网提供优质内容，为用户创造真实价值                </h1>
                <p>
                    聚合全球热点资讯，提供更高质量、更高效率、
                    更舒适的新闻阅读体验，帮助用户快速获取真实有价值的信息内容。
                </p>
                <a href="#" class="hero-btn">
                    查看今日热点
                </a>
            </div>
        </div>
    </section>
	<script>
			</script>
	
    <!-- 主体 -->
    <main class="container">
        <!-- 分类 -->
        <div class="category-bar">
		<a href="#" class="category-item">今日热点</a> <a href="#" class="category-item">AI科技</a> <a href="#" class="category-item">娱乐资讯</a> <a href="#" class="category-item">体育赛事</a> <a href="#" class="category-item">汽车频道</a>
        </div>
        <!-- 新闻布局 -->
        <div class="news-layout">
            <!-- 左侧 -->
            <section class="news-list">
                <!-- 新闻 -->
                <article class="news-card">
                    <div class="news-image"></div>
                    <div class="news-content">
                        <span class="news-tag">
                            科技
                        </span>
                        <h2 class="news-title">
                            AI 技术持续高速发展，
                            正在重塑未来互联网生态
                        </h2>
                        <p class="news-desc">
                            人工智能正在快速改变内容生产、
                            搜索、办公与商业模式，
                            新一轮技术革命已经到来。
                        </p>
                        <div class="news-meta">
                            <span>发布时间：2026-06-22</span>
                            <span>阅读量：999+</span>
                        </div>
                    </div>
                </article>
            </section>
            <!-- 右侧 -->
            <aside class="sidebar">
                <!-- 热门 -->
                <div class="side-card">
                    <h3 class="side-title">
                        热门排行
                    </h3>
                    <div class="hot-list">
                        <div class="hot-item">
                            <div class="hot-num">1</div>
                            <div class="hot-text">
                                AI 搜索引擎成为互联网新趋势
                            </div>
                        </div>
                        <div class="hot-item">
                            <div class="hot-num">2</div>
                            <div class="hot-text">
                                全球科技公司加速布局大模型
                            </div>
                        </div>
                        <div class="hot-item">
                            <div class="hot-num">3</div>
                            <div class="hot-text">
                                新能源汽车行业持续升温
                            </div>
                        </div>
                        <div class="hot-item">
                            <div class="hot-num">4</div>
                            <div class="hot-text">
                                数字经济带动全球产业升级
                            </div>
                        </div>
                    </div>
                </div>
            </aside>
        </div>
    </main>
    <!-- Footer -->
    <footer>
        <p>
            © 2026  新闻资讯网 版权所有
        </p>
        <p>为互联网提供优质内容，共建更美好的数字生态</p>
    </footer>
</body>
</html>